import React, { Component } from 'react'
import { nanoid } from 'nanoid'
import PropTypes from 'prop-types'

export default class Header extends Component {

    // 对接收的prop进行必要性的限制
    static propTypes = {
        addTodo: PropTypes.func.isRequired
    }

    handleKeyup = (event) => {
        const { key, target } = event
        if (key === 'Enter') {
            if (target.value.trim() === '') return
            const todoObj = {
                id: nanoid(),
                name: target.value,
                done: false
            }
            this.props.addTodo(todoObj)
            target.value = ''
        }

    }
    render() {
        return (
            <div>
                <div className="todo-header">
                    <input onKeyUp={this.handleKeyup} type="text" placeholder="请输入你的任务名称，按回车键确认" />
                </div>
            </div>
        )
    }
}
